<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html{
				font-size:16px;
			}
			body{
				font-family:幼圆;
				color:black;
			}
			a{
				text-decoration:none;
				color:black;
			}
			img{
				display:block;
				border:none;
			}
			ul,ol{
				list-style:none;
				width:200px;
				height:200px;
				background-color:lavenderblush;
				border:2px solid black;
				margin:50px auto;
			}
			ul li{
				width:200px;
				height:30px;
				margin:15px;
				margin-left:50px;
			}
			ul li input{
				width:100px;
				height:30px;
				text-align:center;
				line-height:30px;
				border:1px solid black;
				cursor:pointer;
				background-color:cadetblue;
				color:white;
			}
			ul li input:hover{
				color:red;
				background-color:black;
			}
			#display{
				display:block;
				width:300px;
				height:100px;
				margin:20px auto;
				border:2px solid black;
			}
		</style>
		<script type="text/javascript">
			/*
			 【1】，history:window下的对象，表示浏览器历史记录
			 
             【2】，history的属性： history.length  历史记录的条数
			 
			 【3】，history的方法：
			       1，history.back();-->返回上一条记录，相对于后退
				   2,history.forward();-->前进到下一条记录，相当于前进
				   3,history.go();-->属性：0-->当前页面刷新   -X-->后退x条记录    X-->前进x条记录
				   
			 */
			window.onload = function(){
				var display = document.querySelector("#display");
				
				var oBtn1 = document.getElementById("btn1");
				oBtn1.onclick = function(){
					var len = history.length;
					//console.log(len);
					display.innerHTML("一共有"+len+"条记录<br>");
				}
				
				var oBtn2 = document.getElementById("btn2");
				oBtn2.onclick = function(){
					//console.log(history.forward());
					display.innerHTML(history.forward());
				}
				
				var oBtn3 = document.getElementById("btn3");
                oBtn3.onclick = function(){
					//console.log(history.back());
					display.innerHTML(history.back());
				}
				
				var oBtn4 = document.getElementById("btn4");
				oBtn4.onclick = function(){
					//console.log(history.go(0));
					display.innerHTML(history.go(0));
					/* history.go(-2);
					history.go(2); */
				}
			}
		</script>
	</head>
	<body>
		<div>
			<ul class="list">
				<li class="item">
					<input type="button" value="记录数" id="btn1">
				</li>
				<li class="item">
					<input type="button" value="前进" id="btn2">
				</li>
				<li class="item">
					<input type="button" value="后退"id="btn3">
				</li>
				<li class="item">
					<input type="button" value="go" id="btn4">
				</li>
			</ul>
			<span id="display"></span>
		</div>
	</body>
</html>
